<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 1.导入Vue3源码 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- 2.准备待渲染容器 -->
    <div id="app">
        <!-- 4.使用响应式对象数据进行渲染 -->
        <p>姓名：{{ obj.name }}</p>
        <p>年龄：{{ obj.age }}</p>
    </div>
    <!-- 3.创建app并声明数据 -->
    <script>
        // 1,解构出对应的方法
        const {createApp, reactive} = Vue
        createApp({
            setup() {
                // 2,创建响应式对象，并返回
                const obj = reactive({
                    name: "careathers",
                    age: 18
                })
                return {
                    obj
                }
            }
        }).mount("#app")
    </script>
</body>
</html>

